<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="content-language" content="zh-cn" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  <!-- 强制图片显示 -->
  <meta name="imagemode" content="force" />
  <!-- uc强制竖屏 -->
  <meta name="screen-orientation" content="portrait">
  <!-- QQ强制竖屏 -->
  <meta name="x5-orientation" content="portrait">
  <meta name="description" content="">
  <meta name="author" content="">
  <link rel="icon" href="favicon.ico">
  <title>豆瓣书单</title>
  {% include "_includes/head.html" %}
</head>

<body class="main-center no-sidebar">
  {% include "_includes/header.html" %}
  <main class="main">
    <article class="article article-links article-type-list" itemscope="">
      <header class="article-header">
        <h1 itemprop="title">书单</h1>
        <p>个人收藏的书单推荐给大家</p>
        <nav role="navigation" id="nav-main" class="okayNav">
          <ul id="tabs">
            <li><a id="reading-tab" href="javascript:show('reading')" target="_blank" rel="external">在读<span id="reading-total"></span></a></li>
            <li><a id="wish-tab" href="javascript:show('wish')" target="_blank" rel="external">想读<span id="wish-total"></span></a></li>
            <li><a id="read-tab" href="javascript:show('read')" target="_blank" rel="external">已读<span id="read-total"></span></a></li>
          </ul>
        </nav>
      </header>
      <div class="article-body">
        <div id="loading">
          <p>正在加载...</p>
        </div>
        <div id="douban">
          <div id="collections">
            <div id="reading" class="row hide">
            </div>
            <div class="clearfix"></div>
            <div id="wish" class="row hide">
            </div>
            <div class="clearfix"></div>
            <div id="read" class="row hide">
            </div>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </article>
  </main>
  {% include "_includes/footer.html" %}
  {% include "_includes/scripts.html" %}
  <script>
  function show(id) {
    document.getElementById('reading').classList.remove('active');
    document.getElementById('read').classList.remove('active');
    document.getElementById('wish').classList.remove('active');
    document.getElementById('reading').classList.add('hide');
    document.getElementById('read').classList.add('hide');
    document.getElementById('wish').classList.add('hide');

    var ele = document.getElementById(id);
    ele.classList.remove('hide');
    ele.classList.add('active');

    document.getElementById('reading-tab').classList.remove('active');
    document.getElementById('read-tab').classList.remove('active');
    document.getElementById('wish-tab').classList.remove('active');
    document.getElementById(id + '-tab').classList.add('active');
  };

  (function() {
    var read = [];
    var wish = [];
    var reading = [];

    // XHR 获取豆瓣书单数据，数据格式json
    // function loadDoubanCollections() {
    //   var xhr = new XMLHttpRequest();
    //   // https://api.douban.com/v2/book/user/:name/collections
    //   xhr.open('GET', 'http://7b1fa0.com1.z0.glb.clouddn.com/douban-20170429-1.json', true);

    //   xhr.onload = function() {
    //     // console.log(this);
    //     if (this.status >= 200 && this.status < 300) {
    //       var res = JSON.parse(this.response);
    //       searchData = res;
    //       onLoadDouban(searchData);
    //     } else {
    //       console.error(this.statusText);
    //     }
    //   };

    //   xhr.onerror = function() {
    //     console.error(this.statusText);
    //   };

    //   xhr.send();
    // }

    // Ajax 获取豆瓣书单数据，数据格式json
    function loadDoubanCollections() {
      var _this = this;
      // https://api.douban.com/v2/book/user/:name/collections?start=0&count=100
      var url = "https://api.douban.com/v2/book/user/cofess/collections"
      $.ajax({
        url: url,
        type: 'GET',
        data: {
          start: 0, // 从哪一条记录开始
          count: 100 // 获取豆瓣书单数据条数
        },
        dataType: 'JSONP', //here
        success: function(data) {
          // console.log(data);
          onLoadDouban(data);
        }
      });
    }

    function onLoadDouban(data) {
      if (data['count'] > 0) {
        for (var i = 0; i < data['collections'].length; ++i) {
          resolveBook(data['collections'][i]);
        }
      }
      render();
    }

    function resolveBook(book) {
      if (book['status'] == 'read') {
        read.push(book);
      }
      if (book['status'] == 'wish') {
        wish.push(book);
      }
      if (book['status'] == 'reading') {
        reading.push(book);
      }
    }

    function render() {
      renderList(read, 'read');
      renderList(wish, 'wish');
      renderList(reading, 'reading');

      document.getElementById('reading-total').innerHTML = '(' + reading.length + ')';
      document.getElementById('read-total').innerHTML = '(' + read.length + ')';
      document.getElementById('wish-total').innerHTML = '(' + wish.length + ')';

      show('reading');
      document.getElementById('loading').classList.add('hide');
    }

    function renderList(list, id) {
      for (var i = 0; i < list.length; ++i) {
        var h = renderBook(list[i]);
        if (i > 0 && i % 4 == 3) {
          h += '<div class="clearfix"></div>';
        }
        document.getElementById(id).innerHTML = document.getElementById(id).innerHTML + h;
      }
    }

    function renderBook(book) {
      var html = '<div class="col-sm-6 col-md-6"><div class="panel panel-default"><div class="panel-body">' + '<div class="media media-middle book book-' + book['status'] + '">' + '<div class="media-left"><a class="media-middle" target="_blank" href="' + book.book.alt + '" style="display:inline-block;width:116px"><img class="media-object" src="' + book.book.image + '"/></a></div><div class="media-body">' + '<h3 class="media-heading"><a target="_blank" href="' + book.book.alt + '">' + book.book.title + '</a></h3>' + '<p class="meta text-nowrap-1x"><small>' + book.book.author[0] + ' / ' + book.book.pubdate + ' / ' + book.book.rating.average + '分</small></p>' + '<p class="meta text-nowrap-1x">' + book.updated.substring(0, 10) + resolveRating(book.rating) + resolveTags(book.tags) + '</p>' + '<div class="comments text-muted text-nowrap-3x">' + (book.comment ? book.comment : '') + '</div>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>';
      return html;
    }

    function resolveRating(rating) {
      if (rating && rating.value) {
        return ' / ' + rating.value + '星';
      }
      return '';
    }

    function resolveTags(tags) {
      if (tags && tags.length > 0) {
        var html = ' / ';
        for (var i = 0; i < tags.length; ++i) {
          html += tags[i] + ' ';
        }
        return html;
      }
      return '';
    }

    setTimeout(function() {
      loadDoubanCollections();
    }, 0)
  })()
  </script>
</body>

</html>
